<template>
    <view>
        <u-navbar placeholder :title="AppInfo.appname" leftIcon="arrow-left" bgColor="#ffffff"
            leftIconSize="25" autoBack right-icon="chat" @rightClick="Gocomment(AppInfo.id,AppInfo.appname,AppInfo.appicon)">
        </u-navbar>
        <mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" beforeEndDelay="2000" @init="mescrollInit"
            @down="downCallback" @up="upCallback">
            <view class="apphead">
				<u-image :src="AppInfo.appicon" width="80" height="80" radius="10"></u-image>
				<view class="appmsg">
					<view style="display: flex;align-items: center;">
						<view style="margin-right: 10px;">
							<u-text :text="'版本：'+AppInfo.appbb" color="#6c6c6c" ></u-text>
						</view>
						<text class="nomod" v-if="AppInfo.appmod==0">原版</text>
						<text class="mod" v-else-if="AppInfo.appmod==1">MOD</text>
					</view>					
					<u-text :text="'包名：'+AppInfo.apppage" color="#6c6c6c"></u-text>
					<u-text :text="'大小：'+AppInfo.appdata+'Mb'" color="#6c6c6c"></u-text>									
	 			</view>
			</view>
			<view class="apphead2">
				<view class="appnums">
					<u-text :text="AppInfo.star" align="center" size="20" bold></u-text>
					<u-rate count="5" v-model="AppInfo.star"></u-rate>
					<u-text :text="AppInfo.appstarnum+'人参与评分'" size="10" align="center"></u-text>
				</view>
				<view class="appnums">
					<view>{{AppInfo.appdownnum}}</view>
					<view>下载</view>
				</view>
				<view class="appnums">
					<view>{{AppInfo.comment}}</view>
					<view>评论</view>
				</view>
			</view>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view v-if="current==0">
				<view class="apkimg">
				    <u-scroll-list :indicator="false">
				        <view v-for="(item, index) in ApkImg" :key="index">
				            <u-image :src="item" width="280rpx" height="500rpx" mode="scaleToFill"
				                customStyle="margin-right:15rpx" @click="clickImg(index)" radius="16">
				            </u-image>
				        </view>
				    </u-scroll-list>
				</view>
				<view class="tag">
					<block v-for="(tags, index) in AppInfo.apptag" :key="index">
						<u-tag @click="Gotagapp(tags.tagid,tags.tag)" :text="tags.tag" plainFill plain borderColor="rgba(00,00,00,0)" color="#2469f6" shape="circle"/>
					</block>
				</view>
				<view class="apphead3">
					<u-text text="软件介绍" size="20" bold></u-text>
					<u-text :text="AppInfo.appmsg"></u-text>
				</view>
			</view>
			<view v-else-if="current==1" style="margin-bottom: 20px;">
				<block v-for="(apkcom, index) in Apkcomm" :key="index">
					<view class="comstar">
						<view class="comuser">
							<u-image :src="apkcom.usertx" width="45" height="45" radius="10"></u-image>
							<view style="margin-left: 10px;">
								<u-text :text="apkcom.nickname"></u-text>
								<u-text :text="apkcom.time"></u-text>
							</view>						
						</view>
						<view style="margin-top: 5px;">
							<u-rate v-if="apkcom.star<6" count="5" v-model="apkcom.star"></u-rate>
						</view>
						<view style="margin-top: 5px;">							
							<u-text :text="apkcom.content"></u-text>
						</view>
					</view>
				</block>
			</view>
			<view v-else-if="current==2">
				<view class="taglist">
					<block v-for="(tuijian, index) in AppInfo.tuijian" :key="index">
						<view class="newapk" @click="GoApk(tuijian.id)">
							<view class="newicon">
								<u-image :src="tuijian.appicon" width="125rpx" height="125rpx" radius="12" mode="widthFix"
									loadingIcon="hourglass"></u-image>
							</view>
							<view class="newdetail">
								<view class="newnum">
									<u-text :text="tuijian.appname"></u-text>
								</view>
								<view class="newnum">
									<view>
										<u-rate v-if="tuijian.appmod==0" :value="1" size="15" :count="1" readonly
											activeColor="#2469f6"></u-rate>
										<u-rate v-else-if="tuijian.appmod==1" :value="1" size="15" :count="1" readonly
											activeColor="#1a9f35"></u-rate>
									</view>
									<view style="padding-top: 2px;">
										<u-text :text="tuijian.appstar" v-if="tuijian.appmod==0" size="13" color="#2469f6"></u-text>
										<u-text :text="tuijian.appstar" v-if="tuijian.appmod==1" size="13" color="#1a9f35"></u-text>
									</view>
									<u-text :text="tuijian.appbb" size="13" style="margin-left: 10px;" color="#6c6c6c"></u-text>
								</view>
								<view class="newnum">
									<text class="nomod" v-if="tuijian.appmod==0">原版</text>
									<text class="mod" v-else-if="tuijian.appmod==1">MOD</text>
									<view>
										<u-text size="14" :text="tuijian.appdata+'MB  · '+tuijian.appdownnum+'次下载'" color="#6c6c6c"
											lines="1"></u-text>
									</view>
								</view>
							</view>
							<view class="newbtn">
								<u-tag text="下载" plainFill plain borderColor="rgba(00,00,00,0)" color="#2469f6"
									shape="circle" />
							</view>
						</view>
					</block>
				</view>
			</view>
        </mescroll-body>
		<view class="downapk">
		    <view v-if="Apkdown==false" class="downbtn" @click="DownApk(appid)">
		        <text>立即下载</text>
		    </view>
			<view v-else-if="Apkdown==true" class="download">
			    <u-line-progress  :percentage="sleep" activeColor="#21D3AD"
			    	inactiveColor="rgba(33, 211, 173, 0.1)" showText height="35px" :striped="true" :striped-active="true"></u-line-progress>
			</view>
		</view>
        <u-no-network @disconnected="disconnected" @connected="connected" @retry="retry"></u-no-network>
    </view>
</template>
<script>
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import API from '../../util/request.js';
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
                appid: '',
                AppInfo: '',
				ApkImg:[],
				Apkcomm:[],
				sleep: 0,
				Apkdown:false,
                downOption: {
                    use: true, // 是否启用下拉刷新; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
                    autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
                    isLock: false, // 是否锁定下拉刷新,默认false;
                    offset: 60, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
                    inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                    outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                    bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
                    minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
                    beforeEndDelay: 400, // 延时结束的时长 (显示加载成功/失败的时长, android小程序设置此项结束下拉会卡顿, 配置后请注意测试)
                    bgColor: "#f9f9f9", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
                    textColor: "#2469f6", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
                    textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
                    textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
                    textLoading: '加载中 ...' // 加载中的提示文本
                },
                upOption: {
                    use: true, // 是否启用上拉加载; 默认true
                    auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    isLock: false, // 是否锁定上拉加载,默认false;
                    isBoth: true, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认true,两者可同时触发;
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10, // 每页数据的数量
                        time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
                    },
                    noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                    offset: 60, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")
                    bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
                    textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
                    textLoading: '加载中 ...', // 加载中的提示文本
                    textNoMore: '-- 暂无更多 --', // 没有更多数据的提示文本
                    toTop: {
                        // 回到顶部按钮,需配置src才显示
                        src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径
                        offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
                        duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)
                        zIndex: 9990, // fixed定位z-index值
                        left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
                        right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
                        bottom: 120, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
                        safearea: false, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取mescroll组件props的safearea值)
                        width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
                        radius: "50%" // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
                    },
                    empty: {
                        use: true, // 是否显示空布局
                        icon: "/static/nodata/post.png", // 图标路径
                        tip: '~ 暂无相关数据 ~', // 提示                		
                        fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
                        top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
                        zIndex: 99 // fixed定位z-index值
                    },
                    onScroll: true ,// 是否监听滚动事件
                    
                },
				list: [{
					name: '介绍'
				}, {
					name: '评论'
				}, {
					name: '推荐'
				}],
				current: 0,
            }
        },
		onLoad(e){
			var that=this;
			that.appid=e.appid;
			// console.log(this.appid)
		},
        methods: {
			//跳转标签列表页
			Gotagapp:function(id,tag){
				uni.navigateTo({
				    url: '/pages/commen/tagapplist?id=' + id +'&tag='+tag
				})
			},
			//跳转评论发布
			Gocomment:function(appid,appname,appicon){
				uni.navigateTo({
				    url: '/pages/commen/comment?appname=' + appname +'&appicon='+appicon+'&appid='+appid
				})
			},
			change(index) {
				// console.log(index)
				var that=this;
				if(index.index==1){
					this.mescroll.resetUpScroll();
				}
				that.current = index.index;
				
			},
			downCallback() {
			    this.mescroll.resetUpScroll();
			},
            //下拉刷新
            upCallback(page) {
                var that =this;
				
                // console.log('666');
				uni.request({
				    url: API.getAppinfo()+that.appid,
				    success: res => {
						// console.log(res); 
				        var data = JSON.parse(that.AES.decrypt(res.data, API.JmKey(), API.JmIv()))
						that.AppInfo = data.data;
						var imgstr =  data.data.appsce;
						that.ApkImg =imgstr.split(',');
						console.log(data); 
						that.mescroll.endSuccess(data);
						if(that.current==0){
							that.mescroll.endSuccess(data); 
						}else if(that.current==1){
							let pageNum = page.num; 
							let limit = page.size;
							uni.request({
								url: API.listComment()+'?appid='+that.appid +'&limit='+limit+'&page='+pageNum,
								success: res => {
									var datacom = JSON.parse(that.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
									if(page.num == 1) that.Apkcomm = []; //如果是第一页需手动置空列表
									that.Apkcomm = that.Apkcomm.concat(datacom.data);
									that.mescroll.endByPage(datacom.data.length, datacom.msf); 
									// console.log(that.Apkcomm)
								}							
							})
						}else if(that.current==2){
							that.mescroll.endSuccess(data); 
						} 
				    }
				})
				               
            },
			//跳转软件页
			GoApk(id) {
			    uni.navigateTo({
			        url: '/pages/ruanher/ruanherview?appid=' + id
			    })
			},
            //无网络
            disconnected() {
                console.log('disconnected');
            },
            connected() {
                // console.log('connected');
            },
            retry() {
                console.log('retry');
            },
			//图片点击
			clickImg(index) {
			    console.log(index)
			    uni.previewImage({
			        urls: this.ApkImg, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			        current: index, // 当前显示图片的http链接，默认是第一个
			        success: function(res) {},
			        fail: function(res) {},
			        complete: function(res) {},
			    })
			},
			DownApk(id){
				let token = uni.getStorageSync('Token');
				let user = uni.getStorageSync('User');
				if (token !== null && token !== '') {
					uni.request({
						url: API.downapp()+this.appid +'&username='+user+'&token='+token,
						success: res => {
							var datas = JSON.parse(this.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
							// console.log(datas)
							if(datas.code==200){
								this.Apkdown=true;
								this.current=2;
								this.downfile(datas.data)
							}else{
								this.$refs.uToast.show({
									type: 'error',
									message: datas.msf,
								})
							}
						}						
					})
				}else{
					this.$refs.uToast.show({
						type: 'error',
						message: '未登录',
					})
				}
			},
			downfile: function(url) {
				var that = this;
				that.downloadTask = uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode == 200) {
							uni.showModal({
								title: '',
								content: '下载完成，确定现在安装吗？',
								confirmText: '安装',
								confirmColor: '#EE8F57',
								success: (res2) => {
									if (res2.confirm) {
										console.log("开始安装")
										plus.runtime.install( //安装
											res.tempFilePath, {},
											(res) => {
												that.$emit('updateSucc')
												plus.runtime.restart();
											},
											(err) => {
												console.log(err)
												that.$emit('updateErro')
											});
									}
								}
							});
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
				this.downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					this.sleep = res.progress
					if (res.progress == 100) {
						this.Apkdown = false
						this.$emit('downOver')
					}
				});
			},
        }
    }
</script>
<style lang="scss">
    .apphead{
		margin: 10px;
		@include flex(row);
	}
	.apphead2{
		padding: 10px;
		margin:  0px 10px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #ffffff;
		border-radius: 10px;
	}
	.appmsg{
		margin-left: 20px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
	}
	.appnums{
		@include flex(column);
		align-items: center;
		
	}
	
	.appstar{
		display: flex;
		align-items: center;
		justify-content: space-around;		
	}
	.taglist {
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}
	.apphead3{
		padding: 10px;
		margin:  10px 10px 20px 10px;
		background-color: #ffffff;
		border-radius: 10px;
	}
	.apkimg {
	    padding: 10px 10px 0px 10px;
	}
	.tag{
		margin: 0 10px;
		display: flex;
		flex-wrap: row;
	}
	
	.comstar{
		margin: 0 10px 10px 10px;
		
	}
	.comuser{
		display: flex;
		flex-wrap: row;
	}
	
	.newapk {
		width: 100%;
		display: flex;
		margin-top: 6px;
		margin-bottom: 10px;
		justify-content: space-between;
	}
	
	.newicon {
		width: 125rpx;
		height: 125rpx;
		flex: 1;
		border-radius: 14px;
		border: #dcdcdc 1px solid;
	}
	
	.newdetail {
		flex: 4;
		margin-left: 10rpx;
		display: flex;
		flex-direction: column;
	}
	
	.newname {
		color: #000000;
		font-size: 18px;
		overflow: hidden;
		text-overflow: clip;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.newcontent {
		color: #666666;
		font-size: 13px;
		overflow: hidden;
		text-overflow: clip;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.newnum {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	
	.newbtn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	
	
	.nomod {
	    padding: 4px 10rpx;
		margin-right: 10px;
	    border-radius: 6px;
	    background-color: #2469f6;
		font-size: 10px;
	    color: #fff;
	}
	.mod {
	    padding: 4px 10rpx;
		margin-right: 10px;
	    border-radius: 6px;
	    background-color: #1a9f35;
	    font-size: 10px;
	    color: #fff;
	}
	
	.downapk {
	    display: -webkit-flex;
	    display: flex;
	    justify-content: center;
	    position: fixed;
	    width: 100%;
	    bottom: 0rpx;
	    z-index: 1024;
		background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
	}
	.downbtn{
	    @include flex(column);
	    align-items: center;
	    justify-content: center;
	    text-align: center;
	    width: 90%;
	    border-radius: 36rpx;
	    padding: 20rpx;
		margin-bottom: 10px;
	    background-color: #2469f6;
	    color: #FFF;
	    font-size: 26rpx;
	}
	.download{	    
	    width: 95%;
		height: 60upx;
	    padding: 20rpx;
		padding-bottom: 15px;
	}
</style>
